<template>
  <main class="faq">
    <h1>Frenquently Asked Questions</h1>

    <div class="error" v-if="hasRemoteErrors">
      Can't load the questions.
    </div>

    <section class="list">
      <article v-for="question of questionList" :key="question.title">
        <h2 v-html="question.title"></h2>
        <p v-html="question.content"></p>
      </article>
    </section>

    <loading v-if="remoteDataBusy"></loading>
  </main>
</template>

<script>
import Loading from './Loading.vue'
import RemoteData from '../mixins/RemoteData'

export default {
  components: { Loading },
  mixins: [
    RemoteData({
      questionList: 'questions'
    })
  ]
}
</script>